<template>
    <div>
        <Form ref="formInline" :label-width="60">
            <Row :gutter="8" class="query-form">
                <i-col span="8">
                    <FormItem label="标题：" prop="title">
                        <Input v-model="formInline.title" placeholder="标题"/>
                    </FormItem>
                </i-col>
                <i-col span="8" offset="8">
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button  class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </i-col>
            </Row>
        </Form>
        <Row type="flex" justify="start" class="query-form">
            <i-col>
                <Button icon="md-add" class="ivu-btn-add" @click="addInfo">新增</Button>
            </i-col>
        </Row>
        <Table ref='table' :height="tableHeight" :loading="buttonLoading" no-data-text="没有查询到相关数据!"
               stripe border :columns="columns1" :data="resultData">
        </Table>
        <Row type="flex" justify="end" >
            <i-col>
                <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                      @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </i-col>
        </Row>
        <Modal :title="title" :transfer=false :mask-closable="false" v-model="model1" :width=900>
            <Row>
                <Col span="24">
                    <Form ref="form1datacopy" :model="form1datacopy" :rules="ruleCustom" label-position="top">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <i-col span="7">
                                <FormItem label="标题：" prop="title">
                                    <Input type="text" v-model="form1datacopy.title"></Input>
                                </FormItem>
                            </i-col>
                            <i-col span="7">
                                <FormItem label="作品类型：" prop="type">
                                    <Select filterable v-model="form1datacopy.type">
                                        <Option v-for="item in woksTypeList" :value="item.value" :key="item.value">
                                            {{item.name}}
                                        </Option>
                                    </Select>
                                </FormItem>
                            </i-col>
                            <i-col span="7">
                                <FormItem label="科普分类：" prop="classify">
                                    <Select filterable v-model="form1datacopy.classify">
                                        <Option :value="'1'" >安全</Option>
                                        <Option :value="'0'" >环保</Option>
                                    </Select>
                                </FormItem>
                            </i-col>
                        </Row>

                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="描述：" prop="describe">
                                    <Input type="textarea" :rows="2" v-model="form1datacopy.describe"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row v-if="form1datacopy.type=='0'" type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="图片：">
                                    <Upload
                                            ref="upload"
                                            type="drag"
                                            :show-upload-list="true"
                                            :action="upUrl"
                                            :max-size="10240"
                                            :before-upload="beforeUploadImg"
                                    >
                                        <div style="height: 60px">
                                            <Icon type="ios-cloud-upload" size="24" style="color: #3399ff"></Icon>
                                            <p> 请上传 jpg，jpeg，png 格式的图片</p>
                                        </div>
                                    </Upload>
                                    <div v-for="(file,index) in imgs" :key="index">
                                        附件：
                                        <a @click.prevent="downloadFile(file.id,file.fileName)">{{file.fileName}} </a>
                                        <Button type="text" icon="md-trash" @click="deleteImgs(file.id,'picture')"/>
                                        <Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>

                        <Row v-if="form1datacopy.type=='2'" type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                               <!-- <quill-editor ref="myTextEditor" v-model="form1datacopy.content"
                                              style="height:300px;padding-top: 20px;padding-bottom: 60px"></quill-editor>-->
                                <FormItem label="pdf附件：">
                                    <Upload
                                            type="drag"
                                            :show-upload-list="true"
                                            :before-upload="beforeUpload"
                                            :action="downloadUrl"
                                            accept="application/pdf"
                                            :format="['pdf']"
                                            :max-size="204800"
                                    >
                                        <div style="height: 60px">
                                            <Icon type="ios-cloud-upload" size="24" style="color: #3399ff"></Icon>
                                            <p> 请上传 pdf，大小不超过200MB</p>
                                        </div>
                                    </Upload>
                                    <div v-for="(file,index) in imgs" :key="index">
                                        附件：
                                        <a @click.prevent="downloadFile(file.id,file.fileName)">{{file.fileName}} </a>
                                        <Button type="text" icon="md-trash" @click="deleteImgs(file.id,'pdf')"/>
                                        <Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>

                        <Row v-if="form1datacopy.type=='1'" type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="视频：">
                                    <Upload
                                            type="drag"
                                            :show-upload-list="true"
                                            :before-upload="beforeUploadVideo"
                                            :action="downloadUrl"
                                            :max-size="512000"
                                    >
                                        <div style="height: 60px">
                                            <Icon type="ios-cloud-upload" size="24" style="color: #3399ff"></Icon>
                                            <p> 请上传 mp4，avi，rm 格式的视频，大小不超过1G</p>
                                        </div>
                                    </Upload>
                                    <div v-for="(file,index) in imgs" :key="index">
                                        附件：
                                        <a @click.prevent="downloadFile(file.id,file.fileName)">{{file.fileName}} </a>
                                        <Button type="text" icon="md-trash" @click="deleteImgs(file.id,'video')"/>
                                        <Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button @click="submit('form1datacopy')" class="ivu-btn-save" :loading="buttonLoading" >确定</Button>
                <Button @click="handleCancel" class="ivu-btn-cancel" style="margin-left: 10px">取消</Button>
            </div>
        </Modal>
        <Modal title="作品信息修改" :transfer=false v-model="modelEdit" :width=900>
            <Row>
                <Col span="24">
                    <Form ref="form1datacopy" :model="form1datacopy" :rules="ruleCustom" label-position="top">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="7">
                                <FormItem label="作品名称：" prop="worksTitle">
                                    <Input type="text" v-model="form1datacopy.worksTitle"></Input>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label="活动主题：" prop="themeId">
                                    <Input type="text" :readonly=true v-model="form1datacopy.themeName"></Input>
                                    <!-- <Select disabled  filterable v-model="form1datacopy.activityThemeId"  @on-change="selectActivityList">
                                         <Option v-for="item in themeList" :value="item.id" :key="item.id">{{ item.themeName }}</Option>
                                     </Select>-->
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label="活动名称：" prop="activityId">
                                    <Input type="text" :readonly=true v-model="form1datacopy.activityName"></Input>
                                    <!-- <Select  disabled filterable v-model="form1datacopy.activityInfo"   @on-change="setActivityInfo" >
                                         <Option v-for="item in activityList" :value="item.id +'='+item.activityType" :key="item.id">{{ item.activityName }}</Option>
                                     </Select>-->
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="7">
                                <FormItem label="作品类型：" prop="activityTypeName">
                                    <Input type="text" :readonly=true v-model="form1datacopy.activityTypeName"></Input>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label="所属单位：" prop="ssdw">
                                    <Input type="text" v-model="form1datacopy.ssdw"></Input>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label="作者：" prop="worksAuthor">
                                    <Input type="text" v-model="form1datacopy.worksAuthor"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="说明：" prop="tpshow">
                                    <Input type="text" v-model="form1datacopy.tpshow"></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row v-if="form1datacopy.activityType=='0'" type="flex" justify="space-around"
                             class="code-row-bg">
                            <Col span="23">
                                <FormItem label="图片：">
                                    <Upload
                                            ref="upload"
                                            type="drag"
                                            :show-upload-list="true"
                                            accept="image/jpg, image/jpeg,image/png,image/gif,image/bmp"
                                            :action="downloadUrl"
                                            :max-size="10240"
                                            :before-upload="beforeUploadImg"
                                    >
                                        <div style="height: 60px">
                                            <Icon type="ios-cloud-upload" size="24" style="color: #3399ff"></Icon>
                                            <p> 请上传 jpg，jpeg，png 格式的图片</p>
                                        </div>
                                    </Upload>
                                    <div v-for="(file,index) in imgs" :key="index">
                                        附件：
                                        <a @click.prevent="downloadFile(file.id,file.fileName)">{{file.fileName}} </a>
                                        <Button type="text" icon="md-trash" @click="deleteImgs(file.id,'picture')"/>
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row v-if="form1datacopy.activityType=='1'" type="flex" justify="space-around"
                             class="code-row-bg">
                            <Col span="23">
                                <!--<quill-editor ref="myTextEditor" v-model="form1datacopy.worksContent"
                                              style="height:300px;padding-top: 20px;padding-bottom: 60px"></quill-editor>-->
                                <FormItem label="pdf附件：">
                                    <Upload
                                            type="drag"
                                            :show-upload-list="true"
                                            :before-upload="beforeUpload"
                                            :action="downloadUrl"
                                            accept="application/pdf"
                                            :format="['pdf']"
                                            :max-size="204800"
                                    >
                                        <div style="height: 60px">
                                            <Icon type="ios-cloud-upload" size="24" style="color: #3399ff"></Icon>
                                            <p> 请上传 pdf，大小不超过200MB</p>
                                        </div>
                                    </Upload>
                                    <div v-for="(file,index) in imgs" :key="index">
                                        附件：
                                        <a @click.prevent="downloadFile(file.id,file.fileName)">{{file.fileName}} </a>
                                        <Button type="text" icon="md-trash" @click="deleteImgs(file.id,'pdf')"/>
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row v-if="form1datacopy.activityType=='2'" type="flex" justify="space-around"
                             class="code-row-bg">
                            <Col span="23">
                                <FormItem label="视频：">
                                    <Upload
                                            type="drag"
                                            :show-upload-list="true"
                                            :before-upload="beforeUploadVideo"
                                            :action="downloadUrl"
                                            :max-size="512000"
                                    >
                                        <div style="height: 60px">
                                            <Icon type="ios-cloud-upload" size="24" style="color: #3399ff"></Icon>
                                            <p> 请上传 mp4，avi，rm 格式的视频，大小不超过1G</p>
                                        </div>
                                    </Upload>
                                    <div v-for="(file,index) in imgs" :key="index">
                                        附件：
                                        <a @click.prevent="downloadFile(file.id,file.fileName)">{{file.fileName}} </a>
                                        <Button type="text" icon="md-trash" @click="deleteImgs(file.id,'video')"/>
                                        <Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>
                        <div slot="footer" class="query-form2">
                            <Button @click="submit('form1datacopy')" class="ivu-btn-query" :loading="buttonLoading">确定
                            </Button>
                            <Button @click="handleCancel" class="ivu-btn-reset">取消</Button>
                        </div>
                    </Form>
                </Col>
            </Row>
        </Modal>
        <Modal title="作品信息详情" :transfer=false v-model="model2" :width=1000 class="modal-view-detail">
            <Row>
                <Col span="24">
                    <Form :model="showdata" :label-width="120">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="7">
                                <FormItem label="作品名称：" prop="worksTitle">
                                    {{showdata.title}}
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label="作品类型：" prop="worksName">
                                    {{showdata.worksName}}
                                </FormItem>
                            </Col>
                            <Col span="7"></Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="描述：" prop="remark">
                                    {{showdata.remark}}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row v-if="showdata.type === '0'" type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="图片：" prop="imgs ">
                                    <span v-for="(file,index) in imgs" :key="index" style="margin-right: 10px">
                                        <div style="width: 25%;height: 25%;">
                                            <router-link target="_blank" :to="{path:'/imgDetails',query:{id:file.id}}">
                                                  <img :src="file.picture" alt="" style="width: 100%;height: 100%;">
                                            </router-link>

                                            <a @click.prevent="downloadFile(file.id,file.fileName)">{{file.fileName}}</a>
                                        </div>
                                    </span>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row v-if="showdata.type === '1'" type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="视频：" prop="imgs ">
                                    <span v-for="(file,index) in imgs" :key="index" style="margin-right: 10px">
                                        <a @click.prevent="downloadFile(file.id,file.fileName)">{{file.fileName}}</a>
                                    </span>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row v-if="showdata.type === '2'" type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <!--<quill-editor ref="myTextEditor" v-model="showdata.worksContent"
                                              style="height:300px;padding-top: 20px;padding-bottom: 60px"></quill-editor>-->
                                <FormItem label="pdf附件：">
                                    <span v-for="(file,index) in imgs" :key="index" style="margin-right: 10px">
                                        <a @click.prevent="downloadFile(file.id,file.fileName)">{{file.fileName}} </a>
                                        <Button type="text" icon="md-trash" @click="deleteImgs(file.id,'pdf')"/>
                                    </span>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="model2=false">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

    import {Api} from '../../../../api/index.js'
    import {sessionStorage} from '../../../../common/cacheUtils.js';

    export default {
        name: "popularization",
        data(){
            return {
                filePercent:[],
                filePercentVisible:[],
                currentUser: JSON.parse(sessionStorage('userId').get('userId')),
                formInline: {},
                tableHeight: '',
                buttonLoading: false,
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1
                },
                pageSizeArray: [10, 20, 50],
                columns1: [
                    {
                        title: "序号",
                        width: 80,
                        align: "center",
                        render: (h, params) => {
                            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
                        }
                    },
                    {
                        title: '标题',
                        align: 'center',
                        ellipsis: true,
                        key: 'title'
                    },
                    {
                        title: '创建人',
                        align: 'center',
                        width: 130,
                        key: 'createUserName'
                    },
                    {
                        title: '创建时间',
                        align: 'center',
                        width: 180,
                        key: 'createDate',
                        render: (h, params) => {
                           return h('span', (this.formatDate(new Date(params.row.createDate), 'yyyy-MM-dd')));
                        }
                    },
                    {
                        title: '附件类型',
                        align: 'center',
                        ellipsis: true,
                        width: 180,
                        key: 'type',
                        render: (h, params) => {
                            return h('span', (params.row.type === '0' ? '图片' : params.row.type === '1' ? '视频' : 'pdf附件'));
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'view',
                        fixed: 'right',
                        width: 200,
                        render: (h, params) => {
                            let flag =(this.currentUser.loginId === this.Common.admin || this.currentUser.userId === params.row.createUserId
                                ||this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined
                                (this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined &&
                                    params.row.orgCode && params.row.orgCode.indexOf(this.currentUser.companyCode)!=-1))
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.showData(params, 1);
                                        }
                                    }
                                }, '详情'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color:flag?'':'#c5c8ce',
                                        pointerEvents:flag?'':'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.showData(params, 2);
                                        }
                                    }
                                }, '修改'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color:flag?'red':'#c5c8ce',
                                        pointerEvents:flag?'':'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '数据删除',
                                                content: '<p>确定删除该条信息</p>',
                                                okText: '确认',
                                                onOk: () => {
                                                    this.deleteData(params);
                                                },
                                                cancelText: '取消'
                                            });
                                        }
                                    }
                                }, '删除'),
                            ]);
                        }
                    }
                ],
                resultData: [],
                form1datacopy: {},
                model1: false,
                imgs: [null, null],
                woksTypeList: [
                    {
                        name: "图片",
                        value: "0",
                    },
                    {
                        name: "视频",
                        value: "1",
                    },
                    {
                        name: "pdf附件",
                        value: "2",
                    }
                ],
                title: '',
                add: false,
                ruleCustom: {
                    title: [
                        {required: true, message: '  ', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '  ', trigger: 'change'}
                    ],
                    classify: [
                        {required: true, message: '  ', trigger: 'change'}
                    ]
                },
                upUrl: Api.uploadMongoFileByKeyAndType,
                file: null,
                fileName: null,
                downloadUrl: Api.downloadMongoFile,
                fileFj: '',
                themeList: [],
                activityList: [],
                fileType: 'jpg,jpeg,png',
                modelEdit: false,
                showdata: {},
                model2: false,
            }
        },
        mounted() {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query();
        },
        methods: {
            query(){
                this.buttonLoading = true;
                let data = {
                    currentPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                };
                data = Object.assign(data,JSON.parse(JSON.stringify(this.formInline)));
                this.$http.get(Api.popularization, {
                    params: data
                }).then(function(res){
                    this.resultData = res.data.data;
                    this.pagedata.total = res.data.totalSize;
                    this.buttonLoading = false;
                }, function(res){
                    this.$Message.error('请求失败');
                });
            },
            reset(){
                this.formInline = {};
                this.query();
            },
            pageSizeChange(pageSize){
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            pageChange(pageNum){
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            addInfo(){
                this.filePercent=[];
                this.filePercentVisible=[];
                this.title = "科普宣教新增";
                this.imgs = [];
                this.form1datacopy = {
                    popularizationId: this.uuid()
                };
                this.add = true;
                this.model1 = true;
            },
            showData(data, flag) {
                this.buttonLoading = false;
                if (flag == 1) {
                    //查看页面
                    this.showdata = data.row;
                    if (data.row.type === '1') {
                        this.showdata.worksName = "视频";
                        this.getFile(data.row.popularizationId, 'video')
                    } else if (data.row.type === '0') {
                        this.showdata.worksName = "图片";
                        this.getFile(data.row.popularizationId, 'picture')
                    } else {
                        this.showdata.worksName = "pdf附件";
                        this.getFile(data.row.popularizationId, 'pdf')
                    }
                    this.model2 = true;
                } else {
                    //修改页面
                    this.filePercent=[];
                    this.filePercentVisible=[];
                    this.title = "科普宣教详情";
                    this.add = false;
                    this.form1datacopy = JSON.parse(JSON.stringify(data.row));

                    this.$http.get(Api.popularization+"/"+ this.form1datacopy.popularizationId).then((res) => {
                        if (res.data.status == 200) {
                            this.form1datacopy.content = res.data.data.content;
                        }
                    })

                    this.model1 = true;
                    if (data.row.type == '0') {
                        this.getFile(data.row.popularizationId, 'picture');
                    } else if (data.row.type == '1') {
                        this.getFile(data.row.popularizationId, 'video');
                    }else {
                        this.getFile(data.row.popularizationId, 'pdf')
                    }
                }
            },
            getFile(id, type) {
                this.imgs=[]
                this.$http.get(Api.interestedPartiesUserFile + "/" + id + "/files/" + type).then((res) => {
                    if (res.data.result == "success") {
                        this.imgs = res.data.data;
                    }
                }).catch(e => {
                    this.$Message.error("文件读取失败");
                });
            },
            downloadFile(fileId, fileName) {
                let url = this.downloadUrl + "/" + fileId
                this.$http.get(url, {
                    responseType: 'blob'      //告诉服务器我们需要的响应格式
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.body.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = fileName //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                })
            },
            deleteImgs(id, type) {
                this.$http.delete(Api.uploadMongoFile + "/" + id).then((res) => {
                    if (res.data.result == "success") {
                        this.getFile(this.form1datacopy.popularizationId, type);
                    }
                }).catch(e => {
                    this.$Message.error("附件上传失败");
                });
            },
            deleteData(params){
                let url = Api.popularization;
                let userId = sessionStorage('userId').getObject('userId').userId;
                this.$http.delete(url, {params: {
                        popularizationId: params.row.popularizationId,
                        updateUserId: userId
                    }}).then((res) => {
                    this.$Message.success('成功');
                    this.query();
                }).catch(e => {
                    this.$Message.error('请求失败' + e);
                })
            },
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.buttonLoading = true;
                        let userId = sessionStorage('userId').getObject('userId').userId;
                        if (this.add) {
                            this.form1datacopy.createUserId = userId;
                            this.$http.post(Api.popularization, this.form1datacopy).then((res) => {
                                this.$Message.success("保存成功")
                                this.buttonLoading = false;
                                this.model1 = false;
                                this.query();

                            }).catch(e => {
                                this.$Message.error({
                                    content: '保存失败',
                                    duration: 4
                                });
                            })
                        } else {
                            this.form1datacopy.updateUserId = userId;
                            this.$http.put(Api.popularization, this.form1datacopy).then((res) => {
                                this.$Message.success("保存成功")
                                this.model1 = false;
                                this.buttonLoading = false;
                                this.query();
                            }).catch(e => {
                                this.$Message.error({
                                    content: '保存失败',
                                    duration: 4
                                });
                            })
                        }
                    } else {
                        this.$Message.error('请填报完整!');
                    }
                })
            },
            handleCancel() {
                this.form1datacopy = {};
                this.model1 = false;
                this.modelEdit = false;
                this.file = null;
                this.fileName = null;
            },
            beforeUpload(file) {
                let index = file.name.lastIndexOf(".");
                let suffix = file.name.substr(index + 1);
                if ((suffix != 'pdf' && suffix != 'Pdf' && suffix != 'PDF' && suffix != 'pDF') || file.size > 1024 * 1024 * 200) {
                    this.$Message.error("请上传小于200MB的pdf格式附件");
                    this.file = null;
                    this.fileName = null;
                } else {
                    if (this.imgs.length < 1) {
                        this.imgs.push(file);
                        file.fileName = file.name;
                        this.filePercent[0]=0;
                        this.filePercentVisible[0]=false;
                        let _this = this;
                        var config = {
                            progress: function (e) {
                                _this.$set(_this.filePercentVisible,0,true);
                                if(e.lengthComputable){
                                    _this.$set(_this.filePercent,0, 100 * (e.loaded / e.total));
                                }
                            }
                        }
                        const files = file;
                        let formData = new FormData();
                        formData.append("files", files);
                        this.$http.post(Api.uploadMongoFileByKeyAndType + "/" + this.form1datacopy.popularizationId + "/files/pdf", formData,config).then((res) => {
                            if (res.data.result == "success") {
  //                              this.getFile(this.form1datacopy.popularizationId, "pdf");
                            } else {
                                this.$Message.error("附件上传失败");
                            }
                        }).catch(e => {
                            this.$Message.error("附件上传失败");
                        });
                    } else {
                        this.$Message.error("请先删除原有附件在上传");
                    }
                }
                return false;
            },
            async beforeUploadVideo(file) {
                let index = file.name.lastIndexOf(".");
                let suffix = file.name.substr(index + 1);
                if ((suffix != 'mp4' && suffix != 'avi' && suffix != 'rm') || file.size > 1024 * 1024 * 1000) {
                    this.$Message.error("请上传mp4,avi,rm格式的，小于1G的视频");
                    this.file = null;
                    this.fileName = null;
                } else {
                    if (this.imgs.length < 1) {
                        this.imgs.push(file);
                        file.fileName = file.name;
                        this.filePercent[0]=0;
                        this.filePercentVisible[0]=false;
                        let _this = this;
                        var config = {
                            progress: function (e) {
                                _this.$set(_this.filePercentVisible,0,true);
                                if(e.lengthComputable){
                                    _this.$set(_this.filePercent,0, 100 * (e.loaded / e.total));
                                }
                            }
                        }
                        const files = file;
                        let formData = new FormData();
                        formData.append("files", files);
                        this.$http.post(Api.uploadMongoFileByKeyAndType + "/" + this.form1datacopy.popularizationId + "/files/video", formData,config).then((res) => {
                            if (res.data.result == "success") {
//                                this.getFile(this.form1datacopy.popularizationId, "video");
                            } else {
                                this.$Message.error("附件上传失败");
                            }
                        }).catch(e => {
                            this.$Message.error("附件上传失败");
                        });
                    } else {
                        this.$Message.error("请先删除视频在上传");
                    }
                }
                return false;
            },
            beforeUploadImg(file) {
                let index = file.name.lastIndexOf(".");
                let suffix = file.name.substr(index + 1);
                if (suffix != 'jpg' && suffix != 'jpeg' && suffix != 'png') {
                    this.$Message.error("请上传jpg,jpeg,png格式的图片");
                    this.file = null;
                    this.fileName = null;
                } else {
                    if (this.imgs.length <= 2) {
                        this.imgs.push(file);
                        file.fileName = file.name;
                        this.filePercent[this.imgs.length-1]=0;
                        this.filePercentVisible[this.imgs.length-1]=false;
                        let _this = this;
                        var config = {
                            progress: function (e) {
                                _this.$set(_this.filePercentVisible,0,true);
                                if(e.lengthComputable){
                                    _this.$set(_this.filePercent,0, 100 * (e.loaded / e.total));
                                }
                            }
                        }
                        const files = file;
                        let formData = new FormData();
                        formData.append("files", files);
                        this.$http.post(Api.uploadMongoFileByKeyAndType + "/" + this.form1datacopy.popularizationId + "/files/picture", formData,config).then((res) => {
                            if (res.data.result == "success") {
//                                this.getFile(this.form1datacopy.popularizationId, "picture");
                            } else {
                                this.$Message.error("附件上传失败");
                            }
                        }).catch(e => {
                            this.$Message.error("附件上传失败");
                        });

                    } else {
                        this.$Message.error("最多允许上传3张图片");
                    }

                }
                return false;
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
            uuid() {
                let s = [];
                let hexDigits = "0123456789abcdef";
                for (let i = 0; i < 32; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
                let uuid = s.join("");
                return uuid
            }
        }
    }
</script>

<style scoped>

</style>
